<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>魔方</title>
	<style>
		*{margin:0;padding:0;}
		.rongqi{
			width:600px;
			height:600px;
			border:1px solid red;
			margin:20px auto;
			position:relative;
			transform-style:preserve-3d;
			perspective:500px;
			perspective-origin:50% 50%;
		}
		.box{
			width:200px;
			height:200px;
			border:1px solid red;
			margin:auto;
			position:absolute;
			left:0;
			right:0;
			top:0;
			bottom:0;
			transform-style:preserve-3d;
			animation:my 5s infinite linear;
		}
		.box div{
			width:200px;
			height:200px;
			border:1px solid black;
			font-size:30px;
			text-align:center;
			line-height:200px;
			background-color:rgb(0,0,0,0.2);
			margin:auto;
			position:absolute;
			left:0;
			right:0;
			top:0;
			bottom:0;
		}
			.box1{
				transform:rotateX(90deg) translateZ(100px);
			}
			.box2{
				transform:rotateX(90deg) translateZ(-100PX);
			}
			.box3{
				transform:rotateY(90deg) translateZ(100px);
			}
			.box4{
				transform:rotateY(90deg) translateZ(-100px);
			}
			.box5{
				transform:translateZ(100PX);
			}
			.box6{
				transform:translateZ(-100PX);
			}
			@keyframes my{
				0%{
					transform:rotateY(0) rotateZ(0);
				}
			100%{
				transform:rotateY(360deg) rotateZ(360deg);
			}
			}
	</style>
</head>
<body>
	<div class="rongqi">
		<div class="box">
			<div class="box1">box1</div>
			<div class="box2">box2</div>
			<div class="box3">box3</div>
			<div class="box4">box4</div>
			<div class="box5">box5</div>
			<div class="box6">box6</div>
		</div>
	</div>
</body>
</html>